<template>
  <page-body bgImg=' ' safeAreaLeft>
    <view class="username pages font-B ">
      <nav-bar title='设置名字' :backBtn='false' titleColor='#333'>
        <view slot="left" class="font-B font-14 c-008399">取消</view>
        <view slot="right" class="font-B font-14 c-008399">完成</view>
      </nav-bar>
      <view class="username-input">
        <input class="username-input-inner c-333 font-B font-17"  placeholder="请输入您的名字" />
        <view class="username-input-del jh-flex-center">
          <image style="width: 20px;height: 20px;display: block;" :src="ossDomain + '/icon-close.png'"></image>
        </view>
      </view>
    </view>
    <backBtn></backBtn>
  </page-body>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import backBtn from '@/components/back-btn/back'
  export default {
    data() {
      return {
        ossDomain: uni.ossDomain,
      }
    },
    components: {
      backBtn
    },
    filters: {
      changPhone (phone) {
        let str = String(phone)
        if (str.length == 11) {
          return str.replace(/^(.{3})(.*)(.{4})$/, '$1 $2 $3')
        }
        return phone
      }
    },
    methods: {
    }
  }
</script>

<style lang="scss" scoped>
  .pages{
    width: 100%;
    height: 100vh;
    padding:0 30px;
    box-sizing: border-box;
  }
  .username{
    &-input{
      width: 100%;
      height: 50px;
      border: 1px solid #ddd;
      background-color: #fff;
      margin-top: 24px;
      padding: 0 30px;
      box-sizing: border-box;
      position: relative;
      &-inner{
        height: 100%;
        width: 100%;
        padding-right: 30px;
        box-sizing: border-box;
      }
      &-del{
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        right: 15px;
      }
    }
  }
</style>
